Продолжаем внедрение микроразметки в наш Joomla сайт. В предыдущей статье мы добавили микроразметку в тело статьи, на этот раз настало время проверить, как обстоят дела с семантической разметкой материалов в блоге категории. Для начала как обычно воспользуемся помощью «друга» - валидатора микроразметки и посмотрим, есть ли ошибки связанные с микроразметкой на нашем сайте.
Первый тест я запустил в инструменте проверки структурированных данных от Google. Прямо скажу, результат меня не сильно образовал, Гугл обнаружил целый набор ошибок. Однако все оказалось не так страшно.
Инструмент проверки структурированных данных указал на 20 ошибок и 10 предупреждений в элементе типа Blog. В валидаторе микроразметки от Яндекса ошибок (предупреждений) получилось несколько меньше, всего 11 штук, но по большому счету все они идентичные. Если отсеять лишнее, то можно выделить одну основную проблему указанную Яндексом – «Не выполнено обязательное условие для структурированных сниппетов творческих работ: поле description или articleBody отсутствует или пусто»:
Начнем исправление ошибок микроразметки в блоге с проблем, которые показал нам Google. Ошибки эти стандартные – не указан автор, заголовок, издатель, дата модификации и изображение:
Первым делом давайте исправим ошибку, связанную с полем «mainEntityOfPage». Открываем файл blog_item.php расположенный в папке /components/com_content/views/category/tmpl, но лучше все же создать переопределение шаблона блога категории. Добавляем в данный файл уже знакомую нам с предыдущей статьи строку:
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php $shemaURL = &JFactory::getURI(); print $shemaURL; ?>" content="<?php echo $this->escape($this->item->title); ?>"/>
Одной проблемой меньше, идем дальше. Теперь нам необходимо добавить информацию о дате модификации каждого материала (статьи) в блоге при помощи атрибута «dateModified», но при этом выводить её на экран мы не будем:
<time datetime="<?php echo ($items->modified); /*Показываем точную дату модификации*/?>" itemprop="dateModified"></time>
Добавляем поля author и publisher
После того как мы избавились от предупреждений можно приступить к исправлению основных ошибок в микроразметке. Так как в материалах, выведенных в виде блога, у меня нет и намека на информацию об авторе и издателе, то соответственно Гугл меня в них ткнул, так как он считает их обязательными.
Раз уж Google требует эти данные то почему бы их не добавить, а так как автор и издатель на данном сайте один, то я пропишу их статически, не трогая никакую информацию с базы данных. Код у меня получился следующий:
<div itemprop="author" itemscope itemtype="http://schema.org/Person" style="position: absolute;left: -9999px;"> <span itemprop="name">Joom4all.ru</span> </div> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url image" src="/templates/joom4all/images/logo-min.png" style="display:none;"/> <meta itemprop="width" content="230"> <meta itemprop="height" content="109"> </div> <meta itemprop="name" content="Joom4all.ru"> <meta itemprop="address" content="Москва"> <meta itemprop="telephone" content="+7 999 000–00–00"> </div>
Таким образом, я использовал одинаковые данные, как для отдельного материала, так и для каждого материала выведенного в виде блога. После внесенных изменений и повторной проверке Гугл сообщает только о двух ошибках – необходимо указать значение для поля headline и для поля image.
Добавляем недостающие поля headline и image в разметку блога
Почему в блоге категорий для материалов не определены свойства микроразметки, такие как headline и image? Действительно вопрос, ведь все же в Joomla 3 микроразметка Schema.org достаточно качественно составлена. Но как выяснилось, недочеты все же есть. Свойство headline должно быть у заголовков материалов, давайте разберемся, почему в блоге категории Joomla заголовкам материалов не присвоено данное свойство.
Для начала нужно определиться, каким образом у нас формируется заголовок статьи в блоге, если посмотреть на код шаблона блога можно заметить следующую строку:
<?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
Да, заголовок материалов в блоге выводится при помощи такой хитрой конструкции, а если точнее с её помощью мы ссылаемся на новый файл, предназначенный для формирования заголовка. Этот файл под названием blog_style_default_item_title.php находится в папке /layouts/joomla/content и его содержимое следующее:
Как видите, заголовок получил от разработчиков атрибут микроразметки name, а если в настройках выводить его в виде ссылки, то к нему еще добавляется атрибут url. Не будем ковырять данный файл, оставим все как есть, но чтобы добиться желаемого результата и избавиться от ошибки придется внести некоторые изменения в файл blog_item.php.
Единственное что нам стоит сделать, это обернуть код вывода заголовка новым блоком div, в результате должна получиться следующая строка:
<div itemprop="headline"><?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?></div>
С заголовком и свойством headline разобрались, переходим к изображению материалов в блоге. Тут, как и с заголовком, тоже не все так просто. Для вывода изображения, как и заголовка, используются слои:
<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item);?>
Чтобы разобраться, как именно выводится изображение, и какие атрибуты для него выделены, придется лезть в файл intro_image.php расположенный в папке /layouts/joomla/content. Содержимое данного файла следующее:
Как можно заметить, под миниатюры изображений выделен атрибут thumbnailUrl, и я считаю это вполне логично, но мнение Гугла на этот счет несколько иное, ему, видите ли, подавай изображение с соответствующим атрибутом (image).
Тут поступить можно двумя способами, первый самый простой – добавить новое изображение в файл blog_item.php и присвоить ему соответствующий атрибут, а чтобы изображение не дублировалось скрыть его с глаз при помощи стилей:
<? $arrImg=json_decode($this->item->images); ?> <img itemprop="image" src="<? echo($arrImg->image_intro); ?>" style="display:none;"/>
Такой вариант действительно работает, но скорость загрузки страницы может просесть, так как вместо одной миниатюры изображения для каждого материала мы загружаем сразу два и от такого подхода я решил отказаться.
Другой вариант это внесение изменений в файл intro_image.php, но чтобы после очередного обновления Joomla внесенные изменения не пропали лучше скопировать данный файл в папку templates/имя_шаблона/html/layouts/joomla/content и только после этого приступать к правке.
Открываем файл intro_image.php и ищем в нем следующий код (строка 22 и 27):
src="<?php echo htmlspecialchars($images->image_intro, ENT_COMPAT, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>" itemprop="thumbnailUrl"/>
добавляем атрибут image, в результате строки должны получиться такими:
src="<?php echo htmlspecialchars($images->image_intro, ENT_COMPAT, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>" itemprop="thumbnailUrl image"/>
Очередной раз запускаем инструмент проверки структурированных данных от Google и радуемся отсутствию ошибок.
Проверка микроразметки блога в валидаторе Яндекса
Запускаем тот же самый тест в валидаторе микроразметки от Яндекса, тут собственно все без изменений, как и прежде две ошибки:
- Не выполнено обязательное условие для структурированных сниппетов творческих работ: поле description или articleBody отсутствует или пусто;
- поле interactionCount не определено в спецификации https://schema.org/Article.
Что делать с полем interactionCount мы говорили в предыдущей статье, когда внедряли микроразметку в статьи Joomla 3. Повторяем все те же действия и ошибки исчезнет. А вот что касается ошибок связанных с полями description и articleBody надо разбираться.
Как выяснилось все дело в том, что краткое описание материала выводится совершенно без разметки при помощи вот такой строчки кода:
<?php echo $this->item->introtext; ?>
Вы наверно уже догадались, что тут можно сделать? Правильно обернуть этот код блоком div и добавить ему необходимый атрибут. Какой атрибут выбрать description или articleBody? Лично я думаю, что логичнее всего будет использование атрибута description, ведь все же это вступительный текст, другими словами краткое описание статьи. Код у меня получился вот таким:
<div class="intro" itemprop="description"> <?php echo $this->item->introtext; ?> </div>
Сохраняем изменения и проверяем результат. После очередного теста Яндекс сообщил лишь об одной ошибке, которая гласит что не определено поле description либо articleBody, но уже не для каждого материала в блоге, а для всей страницы целиком. Тут есть единственный правильный выход - писать описание для каждой категории материалов и выводить его на странице блога.
Однако даже если описание категории будет составлено и выведено, ошибка сама собой не исчезнет, ведь для описания микроразметка не предусмотрена и её надо будет добавить. По умолчанию описание категории выводится при помощи вот такого кода:
<?php if ($this->params->get('show_description') && $this->category->description) : ?>
<?php echo JHtml::_('content.prepare', $this->category->description, '', 'com_content.category'); ?>
<?php endif; ?>
Нам же необходимо обернуть код вывода описания категории новым блоком div и добавить ему свойство «description»:
<?php if ($this->params->get('show_description') && $this->category->description) : ?>
<div itemprop="description"> <?php echo JHtml::_('content.prepare', $this->category->description, '', 'com_content.category'); ?></div>
<?php endif; ?>
Вот и все, микроразметка Schema.org для блога категории в Joomla 3 составлена и прошла все проверки, по результатам которых ошибок обнаружено не было. Кто знает, возможно, в дальнейшем после внесения очередных изменений в словарь Schema.org будут появляться новые ошибки, которые надо будет исправлять, но сделать это будет уже гораздо проще, ведь мы уже знаем, что и как редактировать.
